<template>
	<view>
		<video id="myVideo" :src="currVideoUrl" @error="videoErrorCallback"  autoplay="true" class="video"
			@waiting="videoWaitingCallback" @play="videoPlayCallback"
            controls></video>
		<view class="tip">tips: 点击下列按钮切换频道！！</view>
		<view class="items">
			<block v-for="(item,index) in list" :key="index">
				<text @click="to(item.key)" class="item">{{item.value}}</text>
			</block>
		</view>
		
	</view>
</template>


			
<script>
	export default {
		data() {
			return {
				currVideoUrl:'',
				list:[
					{'key':'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8', 'value':'CCTV-1高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8', 'value':'CCTV-3高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8', 'value':'CCTV-5高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8', 'value':'CCTV-5+高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8', 'value':'CCTV-6高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv8hd.m3u8', 'value':'CCTV-8高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/chchd.m3u8', 'value':'CHC高清电影'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8', 'value':'北京卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv2hd.m3u8', 'value':'北京文艺高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv6hd.m3u8', 'value':'北京体育高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv11hd.m3u8', 'value':'北京纪实高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8', 'value':'		湖南卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/zjhd.m3u8', 'value':'浙江卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/jshd.m3u8', 'value':'江苏卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/dfhd.m3u8', 'value':'东方卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/ahhd.m3u8', 'value':'安徽卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/hljhd.m3u8', 'value':'黑龙江卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/lnhd.m3u8', 'value':'辽宁卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/szhd.m3u8', 'value':'深圳卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/gdhd.m3u8', 'value':'广东卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/tjhd.m3u8', 'value':'天津卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/hbhd.m3u8', 'value':'湖北卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/sdhd.m3u8', 'value':'山东卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/cqhd.m3u8', 'value':'重庆卫视高清'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv1.m3u8', 'value':'CCTV-1综合'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv2.m3u8', 'value':'CCTV-2财经'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv3.m3u8', 'value':'CCTV-3综艺'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv4.m3u8', 'value':'CCTV-4中文国际'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv5.m3u8', 'value':'CCTV-5体育'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv6.m3u8', 'value':'CCTV-6电影'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv7.m3u8', 'value':'CCTV-7军事农业'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv8.m3u8', 'value':'CCTV-8电视剧'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv9.m3u8', 'value':'CCTV-9纪录'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv10.m3u8', 'value':'CCTV-10科教'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv11.m3u8', 'value':'CCTV-11戏曲'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv12.m3u8', 'value':'CCTV-12社会与法'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv13.m3u8', 'value':'CCTV-13新闻'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv14.m3u8', 'value':'CCTV-14少儿'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv15.m3u8', 'value':'CCTV-15音乐'},
					{'key':'http://ivi.bupt.edu.cn/hls/cctv16.m3u8', 'value':'CCTV-NEWS'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv1.m3u8', 'value':'北京卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv2.m3u8', 'value':'北京文艺'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv3.m3u8', 'value':'北京科教'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv4.m3u8', 'value':'北京影视'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv5.m3u8', 'value':'北京财经'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv6.m3u8', 'value':'北京体育'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv7.m3u8', 'value':'北京生活'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv8.m3u8', 'value':'北京青年'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv9.m3u8', 'value':'北京新闻'},
					{'key':'http://ivi.bupt.edu.cn/hls/btv10.m3u8', 'value':'北京卡酷少儿'},
					{'key':'http://ivi.bupt.edu.cn/hls/sztv.m3u8', 'value':'深圳卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/ahtv.m3u8', 'value':'安徽卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/hntv.m3u8', 'value':'河南卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/sxtv.m3u8', 'value':'陕西卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/jltv.m3u8', 'value':'吉林卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/gdtv.m3u8', 'value':'广东卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/sdtv.m3u8', 'value':'山东卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/hbtv.m3u8', 'value':'湖北卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/gxtv.m3u8', 'value':'广西卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/hebtv.m3u8', 'value':'河北卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/xztv.m3u8', 'value':'西藏卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/nmtv.m3u8', 'value':'内蒙古卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/qhtv.m3u8', 'value':'青海卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/sctv.m3u8', 'value':'四川卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/jstv.m3u8', 'value':'江苏卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/tjtv.m3u8', 'value':'天津卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/sxrtv.m3u8', 'value':'山西卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/lntv.m3u8', 'value':'辽宁卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/xmtv.m3u8', 'value':'厦门卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/xjtv.m3u8', 'value':'新疆卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/dftv.m3u8', 'value':'东方卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/hljtv.m3u8', 'value':'黑龙江卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/hunantv.m3u8', 'value':'湖南卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/yntv.m3u8', 'value':'云南卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/jxtv.m3u8', 'value':'江西卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/dntv.m3u8', 'value':'福建东南卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/zjtv.m3u8', 'value':'浙江卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/gztv.m3u8', 'value':'贵州卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/nxtv.m3u8', 'value':'宁夏卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/gstv.m3u8', 'value':'甘肃卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/cqtv.m3u8', 'value':'重庆卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/bttv.m3u8', 'value':'兵团卫视'},
					{'key':'http://ivi.bupt.edu.cn/hls/lytv.m3u8', 'value':'旅游卫视'}]
			};
		},
		onReady: function (res) {
			this.currVideoUrl = this.list[0].key;
			this.videoContext = uni.createVideoContext('myVideo');
		},
		methods: {
			videoErrorCallback: function (e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},
			videoWaitingCallback: function(){
				
			},
			videoPlayCallback: function(){
					
			},
			to: function(url){
				this.currVideoUrl = url;
			}
		}
	}
</script>

<style>
   .video{
		width: 100%;
		position: fixed;
		top: 0upx;
		display: flex;
	}
	.tip{
		margin-top: 450upx;
		background: #cbcbcb;
		line-height: 40px;
		padding: 5px;
		padding-left: 15upx;
	}
	.items{
		margin-top: 10upx;
	}
	.item{
		border: 1px solid #F06F9B;
		margin: 20upx 10upx 20upx 10upx;
		padding: 6upx;
		border-radius: 6upx;
		font-size: 14px;
		display: inline-block;
		
	}
</style>
